<template style="background: #1f2d3d">
  <div>
    <h1>总数：{{ residenceList.length }}</h1>
    <hr style="border: 0; border-top: 1px dashed #5a5e66;">
    <h5>共{{ residenceList.length }}条信息</h5>
    <el-row>
      <el-col
        v-for="(residence, index) in residenceList"
        :key="residence.id"
        :span="6"
        :offset="index > 0 ? 2 : 0"
      >
        <el-card
          class="card-container"
          :class="{ 'card-selected': selectedResidenceIndex === index }">
          <div
            style="width: 100%;height: 100%;"
            @click="selectResidence(index)"
            @dblclick="toNext(residence)"
          >
            <div class="card-content">
              <div class="image-wrapper">
                <img
                  :src="residence.picture || 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'"
                  class="image"
                ><br>
                编号：{{ residence.id }}
              </div>
              <div class="info-wrapper">
                <span class="title" style="font-size: 20px">{{ residence.name }}</span>
                <span class="title">{{ residence.address }}</span>
                <div class="bottom-info clearfix" style="margin-top: 10px;margin-bottom: 10px">
                  <b style="margin-right: 10px;">辖区：</b>
                </div>
                <div class="bottom-info clearfix" style="margin-top: 10px;">
                  <b style="margin-right: 10px;">居民楼</b>
                  <b style="margin-right: 5px;color: #a95812">{{ residence.buildingCount }}</b><b>栋</b>
                </div>
                <div class="bottom-info clearfix" style="margin-top: 10px;">
                  <b style="margin-right: 10px;">住户</b>
                  <b style="margin-right: 5px;color: #a95812">{{ residence.houseCount }}</b><b>户</b>
                </div>
              </div>
            </div>
            <hr style="width: 440px;border: 0; border-top: 1px dashed #5a5e66;">
            <div class="card-content" style="margin-top: -20px">
              <div class="outer-container" style="display: flex; align-items: center; margin-right: 40px">
                <el-button type="info" icon="el-icon-s-custom" circle style="margin-right: 20px;"></el-button>
                <div class="info-block" style="margin-left: -10px">
                  <h6>实有人口</h6>
                  <div style="margin-top: -20px;">
                    <h4>{{ residence.population }}</h4>
                  </div>
                </div>
              </div>
              <div class="outer-container" style="display: flex; align-items: center; margin-right: 40px">
                <el-button type="info" icon="el-icon-house" circle style="margin-right: 20px;"></el-button>
                <div class="info-block" style="margin-left: -10px">
                  <h6>实有房屋</h6>
                  <div style="margin-top: -20px;">
                    <h4>{{ residence.houseCount }}</h4>
                  </div>
                </div>
              </div>
              <div class="outer-container" style="display: flex; align-items: center;">
                <el-button type="info" icon="el-icon-office-building" circle style="margin-right: 20px;"></el-button>
                <div class="info-block" style="margin-left: -10px">
                  <h6>实有单位</h6>
                  <div style="margin-top: -20px;">
                    <h4>{{ residence.unit }}</h4>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-content" style="margin-top: -20px">
              <div class="outer-container" style="display: flex; align-items: center; margin-right: 40px">
                <el-button type="info" icon="el-icon-truck" circle style="margin-right: 20px;"></el-button>
                <div class="info-block" style="margin-left: -10px">
                  <h6>实有车辆</h6>
                  <div style="margin-top: -20px;">
                    <h4>{{ residence.vehicle }}</h4>
                  </div>
                </div>
              </div>
              <div class="outer-container" style="display: flex; align-items: center; margin-right: 40px">
                <el-button type="info" icon="el-icon-bangzhu" circle style="margin-right: 20px;"></el-button>
                <div class="info-block" style="margin-left: -10px">
                  <h6>实有力量</h6>
                  <div style="margin-top: -20px;">
                    <h4>{{ residence.strength }}</h4>
                  </div>
                </div>
              </div>
              <div class="outer-container" style="display: flex; align-items: center;">
                <el-button type="info" icon="el-icon-camera-solid" circle style="margin-right: 20px;"></el-button>
                <div class="info-block" style="margin-left: -10px">
                  <h6>实有设备</h6>
                  <div style="margin-top: -20px;">
                    <h4>{{ residence.equipment }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSqResidenceList } from '@/api/system/residence'

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      residenceList: [],
      // 表格树数据
      deptList: [],
      // 是否展开，默认全部展开
      isExpandAll: true,
      sqResidenceRequest:{
        name: "",
        pageNum: 1,
        pageSize: 9,
      },
      selectedResidenceIndex: 0,
    }
  },
  methods: {
    getResidenceList() {
      getSqResidenceList(this.sqResidenceRequest).then(response => {
        this.residenceList = response.data
      })
    },
    selectResidence(index) {
      this.selectedResidenceIndex = index; // 更新选中的卡片索引
    },
    toNext(residence){
      this.$router.push({
        path:"/six/residence/details",
        query:{
          residence:residence
        }
      })
    }
  },
  created() {
    this.getResidenceList()
  }
}

</script>

<style scoped>
.card-container {
  height: 350px;
  width: 470px;
  display: flex;
  flex-direction: column; /* 保持卡片内容的垂直布局 */
  align-items: center; /* 如果需要，可以垂直居中 */
  justify-content: center; /* 如果需要，可以水平居中（但在这个案例中不是必需的） */
  padding: 16px; /* 给卡片内部添加一些内边距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加卡片阴影，使样式更美观 */
  border-radius: 8px; /* 添加圆角 */
  background-color: #fff; /* 设置背景颜色 */
}

.card-selected {
  /* 选中卡片的样式，例如边框颜色变化、背景颜色变化等 */
  border: 2px solid #409EFF; /* Element UI的主题色 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center; /* 保持子元素垂直居中（在这个案例中可能不是必需的，因为我们有具体的布局） */
  width: 100%;
}

.image-wrapper {
  flex: 0 0 auto; /* 图片容器占据固定空间 */
  margin-right: 16px; /* 图片和信息之间的间距 */
}

.image {
  max-width: 100px; /* 限制图片的最大宽度 */
  max-height: 100px; /* 限制图片的最大高度，保持宽高比可以通过object-fit处理 */
  object-fit: cover; /* 保持图片的纵横比并填充容器 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加图片阴影 */
}

.info-wrapper {
  flex: 1 1 auto; /* 信息容器占据剩余空间 */
  display: flex;
  flex-direction: column; /* 信息内容垂直排列 */
  align-items: flex-start; /* 信息内容从左侧开始排列 */
}

.title {
  font-size: 16px; /* 设置标题字体大小 */
  font-weight: bold; /* 设置标题字体加粗 */
  margin-bottom: 8px; /* 标题和底部信息之间的间距 */
}

.bottom-info {
  display: flex;
  align-items: center; /* 底部信息垂直居中 */
}

.time {
  margin-right: 16px; /* 时间和按钮之间的间距 */
  color: #999; /* 设置时间颜色 */
}

.operation-button {
  color: #409EFF; /* 设置按钮颜色 */
  text-decoration: none; /* 去除按钮的下划线 */
}

/* 其他样式可以根据需要调整 */
</style>
